<template>
  <div class="td-patient">
    <router-view></router-view>

    <mt-tabbar class="td-patient-tabbar" fixed v-model="selected" v-if="isTabbar">
      <mt-tab-item id="论坛" @click.native="$router.push({name:'tdPatientForum'});">
        <img slot="icon" src="../../assets/images/patient/tabbar-forum.png">
        论坛
      </mt-tab-item>
      <mt-tab-item id="检测" @click.native="toPath('tdPatientDelection');">
        <img slot="icon" src="../../assets/images/patient/tabbar-delection.png">
        检测
      </mt-tab-item>
      <mt-tab-item id="预约" @click.native="toPath('tdPatientReservation');">
        <img slot="icon" src="../../assets/images/patient/tabbar-reservation.png">
        预约
      </mt-tab-item>
      <mt-tab-item id="我的" @click.native="$router.push({name:'tdPatientMe'});">
        <img slot="icon" src="../../assets/images/patient/tabbar-me.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: "TianDingPatientComponent",
  data() {
    return {
      selected: "我的",
      isTabbar: true
    };
  },
  mounted() {
    if (
      this.$route.name !== "tdPatientMe" &&
      this.$route.name !== "tdPatientReservation" &&
      this.$route.name !== "tdPatientDelection" &&
      this.$route.name !== "tdPatientForum" &&
      this.$route.name !== "tdPatientInfo"
    ) {
      this.isTabbar = false;
    } else {
      this.isTabbar = true;
      switch (this.$route.name) {
        case "tdPatientForum":
          this.selected = "论坛";
          break;
        case "tdPatientDelection":
          this.selected = "检测";
          break;
        case "tdPatientReservation":
          this.selected = "预约";
          break;
        case "tdPatientMe":
          this.selected = "我的";
          break;
      }
    }
  },
  methods: {
    toPath(name) {
      if (this.local$.userEmpty()) {
        this.$router.push({ name: name });
      } else {
        this.$router.push({ name: "tdPatientInfo" });
      }
    }
  },
  watch: {
    $route(now, old) {
      if (
        now.name !== "tdPatientMe" &&
        now.name !== "tdPatientReservation" &&
        now.name !== "tdPatientDelection" &&
        now.name !== "tdPatientForum" &&
        now.name !== "tdPatientInfo"
      ) {
        this.isTabbar = false;
      } else {
        this.isTabbar = true;
        switch (now.name) {
          case "tdPatientForum":
            this.selected = "论坛";
            break;
          case "tdPatientDelection":
            this.selected = "检测";
            break;
          case "tdPatientReservation":
            this.selected = "预约";
            break;
          case "tdPatientMe":
            this.selected = "我的";
            break;
        }
      }
    }
  }
};
</script>
